// import React from 'react'
import { Component } from 'react'

import './todo.css'

export default class Todo extends Component {

    inputNode: HTMLInputElement | null = null

    state = {
        list: [
            {
                task: '吃饭',
                status: 'done',
                id: 0
            },
            {
                task: '睡觉',
                status: 'done',
                id: 1
            },
            {
                task: '上班',
                status: 'undone',
                id: 2
            }
        ],
        curBtn: ''
    }
    // 添加任务
    addTask = () => {
        // 一、 获取输入值，组装成一个对象
        const task = this.inputNode?.value || null
        const { list } = this.state
        // const o = {task, status:'undone',id:list.length}
        const o: { task: string; status: 'done' | 'undone'; id: number } = {
            task: task ?? '默认任务',  // 如果 task 可能是 undefined，提供默认值
            status: 'undone',
            id: list.length
        };

        // 二、 放在数组的最前面
        list.unshift(o)
        this.setState({ list })
        //输入框清空： 1.非空断言
        this.inputNode!.value = ""   // ! 表示确定此时 inputNode 一定有值
        //输入框清空： 2. 类型守卫
        // if (this.inputNode) {
        //     this.inputNode.value = "";  // TS 知道这里 inputNode 已排除 null/undefined
        // }
        //输入框清空： 3.提供默认值
        // (this.inputNode ?? document.createElement('input')).value = "";


    }
    // 修改任务状态
    changeStatus = (data: { task?: string; status?: string; id: number }) => {
        const { list } = this.state

        // const newObj = list.find(item => item.id === data?.id)
        // if (newObj?.status === 'done') {
        //     newObj.status = 'undone'
        // } else if (newObj?.status === 'undone') {
        //     newObj.status = 'done'
        // }
        // const newList = list.map((item) => item.id === newObj?.id ? newObj : item)
        // this.setState({newList})

        for (const item of list) {
            if (item.id === data?.id) {
                item.status = item.status === 'done' ? 'undone' : 'done'
                break;
            }
        }
        this.setState({ list })
    }
    // 切换全部状态
    clickBtn = (data: string | null) => {
        this.setState({ curBtn: data })
    }

    get renderArr() {
        const { list, curBtn } = this.state
        // if (curBtn !== 'all') {
        //     const newArr = list.filter((item) => item.status === curBtn)
        //    return this.setState({ list: newArr })
        // }
        // else {
        //    return this.setState({ list })
        // }
        switch (curBtn) {
            case 'done':
                return list.filter((item) => item.status === 'done');
            case 'undone':
                return list.filter((item) => item.status === 'undone');
            default:
                return list
        }
    }


    // 获取输入框的值
    // getInput = (node: HTMLInputElement | null) => {
    //     this.inputNode = node
    // }

    render() {
        const { curBtn } = this.state
        return (
            // 这个可以加 key
            // <React.Fragment key={1}>
            //     <div>todo list</div>
            // </React.Fragment>

            <>
                <div>
                    <input ref={(node) => { if (node) this.inputNode = node; }} placeholder='task' />
                    <button onClick={this.addTask}>添加任务</button>
                </div>
                <ul>
                    {this.renderArr.map(item => (
                        <>
                            <li className={item.status} key={item.id} onClick={() => this.changeStatus(item)}>{item.task}</li>
                        </>
                    ))}
                    {/* <li className='done'>Task 1</li>
                    <li className='undone'>Task 2</li>
                    <li className='done'>Task 3</li> */}
                </ul>
                <div>
                    <button onClick={() => this.clickBtn('all')} className={curBtn === 'all' ? 'active' : ''}>全部</button>
                    <button onClick={() => this.clickBtn('done')} className={curBtn === 'done' ? 'active' : ''}>已完成</button>
                    <button onClick={() => this.clickBtn('undone')} className={curBtn === 'undone' ? 'active' : ''}>未完成</button>
                </div>
            </>
        )
    }
}
